<template>
    <div class="background flex jc-center">
        <div class="wrapper relative">
            <loading :load="load"></loading>
            <div class="menu flex jc-space-between">
                <div class="back" @click="$router.push(`/blog/${uid}`)">
                    <i class="iconfont icon-angle-left"></i>
                    <span>返回</span>
                </div>
                <div class="option flex">
                    <div class="save relative" @click="save">
                        <span>保存</span>
                        <span class="bottom"></span>
                    </div>
                    <div class="submit relative" @click="post">
                        <span>发布</span>
                        <span class="bottom"></span>
                    </div>
                </div>
            </div>
            <div class="main">
                <label>
                    标题
                    <input type="text" v-model="data.title">
                </label>
                <label>
                    摘要
                    <textarea class="abstract" v-model="data.abstract"></textarea>
                </label>
                <p class="label">正文</p>
                <div id="editor"></div>
                <div class="tips">
                    使用<a href="https://www.wangeditor.com/index.html" target="_blank">wangEditor</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import E from 'wangeditor'

    export default {
        name: "post",
        props: ['uid'],
        data() {
            return {
                editor: null,
                editorData: '',

                data: {
                    title: '',
                    abstract: '',
                    post: '',
                },

                load: false,
            }
        },
        methods: {
            save() {
                this.$emit('alert', '已保存')
            },
            async post() {
                if (this.data.title === '') {
                    this.$emit('alert', '标题不能为空！');
                    return;
                }
                if (this.data.post === '') {
                    this.$emit('alert', '正文不能为空！');
                    return;
                }
                this.load = true;

                let abstract = this.data.abstract.replaceAll('\n', '<br/>');

                await this.$http.post('/blog/post', {
                    title: this.data.title,
                    abstract: abstract,
                    post: this.data.post
                });
                this.load = false;
                this.$emit('alert', '发送成功')
                await this.$router.push(`/blog/${this.uid}`);
            }
        },
        mounted() {
            const editor = new E('#editor');
            editor.config.onchange = (newHtml) => {
                this.editorData = newHtml
            }
            editor.config.height = 400;

            editor.config.uploadImgServer = [process.env.VUE_APP_API_URL || 'api', '/blog/postImg'].join('');
            editor.config.uploadImgMaxSize = 15 * 1024 * 1024; // 15M
            editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
            editor.config.uploadFileName = 'img';
            editor.config.uploadImgHeaders = {
                authorization: 'Bearer ' + sessionStorage.token
            }
            editor.config.uploadImgHooks = {
                /**
                 * @param result.data.url {string}
                 */
                customInsert: function(insertImgFn, result) {
                    insertImgFn([process.env.VUE_APP_SOCKET_URL || '/', result.data.url].join(''));
                }
            }
            let that = this;
            editor.config.onchange = function (html) {
                that.data.post = html;
            }
            editor.create();

            this.editor = editor;
        }
    }
</script>

<style scoped lang="scss">
    .background {
        min-height: 100vh;
        box-sizing: border-box;
        overflow: hidden;

        .wrapper {
            width: 1200px;
            min-width: 700px;
            height: 100vh;
            overflow-y: scroll;
            background-color: white;

            &::-webkit-scrollbar {
                width: 6px;
                background-color: #F5F5F5;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background-color: #555;
                cursor: pointer;
            }

            &::-webkit-scrollbar-track {
                border-radius: 10px;
            }

            .menu {
                margin: 30px 100px;
                user-select: none;

                .iconfont,
                span {
                    font-size: 20px;
                    line-height: 20px;
                }

                .back {
                    position: relative;
                    left: -25px;
                    cursor: pointer;
                    transition: all .3s;

                    &:hover {
                        left: -22px;
                    }

                    .iconfont {
                        margin-right: 5px;
                    }
                }

                .option {
                    .save,
                    .submit {
                        margin-left: 20px;
                        cursor: pointer;

                        &:hover .bottom {
                            width: 100%;
                            background-color: #666;
                        }

                        .bottom {
                            display: block;
                            position: absolute;
                            bottom: -5px;
                            width: 0;
                            height: 2px;
                            transition: all .3s;
                        }
                    }
                }
            }

            .main {
                padding: 30px 100px 50px 100px;

                label,
                p {
                    font-size: 20px;
                    line-height: 20px;
                }

                input,
                textarea {
                    margin: 20px 0;
                    padding: 10px 12px;
                    display: block;
                    width: 100%;
                    border: 0;
                    border-radius: 5px;
                    box-sizing: border-box;
                    outline: 1px solid #c9d8db;
                    font-size: 16px;
                    font-family: Helvetica,sans-serif;
                    transition: outline-color .3s;

                    &:focus {
                        outline-color: #666;
                    }
                }

                textarea {
                    height: 150px;
                    resize: none;
                }

                .label {
                    margin-bottom: 20px;
                }

                #editor {
                    font-family: Helvetica, sans-serif;
                }

                .tips {
                    margin-top: 20px;
                    text-align: center;
                    line-height: 14px;
                    font-size: 14px;

                    a {
                        margin-left: 2px;
                        line-height: 14px;
                        font-size: 14px;
                        text-decoration: none;
                    }
                }
            }
        }
    }
</style>